<h3 class="first">Basic: {{val1}}</h3>
<p-slider [(ngModel)]="val1" [style]="{'width':'200px'}"></p-slider>

<h3>Input: {{val2}}</h3>
<input type="text" pInputText [(ngModel)]="val2" style="width:190px"/>
<p-slider [(ngModel)]="val2" [style]="{'width':'200px'}"></p-slider>

<h3>Animate: {{val3}}</h3>
<p-slider [(ngModel)]="val3" [style]="{'width':'200px'}" [animate]="true"></p-slider>

<h3>Step: {{val4}}</h3>
<p-slider [(ngModel)]="val4" [style]="{'width':'200px'}" [step]="20"></p-slider>

<h3>Range: {{rangeValues[0] + ' - ' + rangeValues[1]}}</h3>
<p-slider [(ngModel)]="rangeValues" [style]="{'width':'200px'}" [range]="true"></p-slider>

<h3>Vertical: {{val5}}</h3>
<p-slider [(ngModel)]="val5" [style]="{'height':'200px'}" orientation="vertical"></p-slider>
